<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.mobile.css">
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script> 
<title>订单列表</title>

<!--百度MIP加速代码 -->
 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 <!--TODO: canonical href需要替换成原页面url-->
 <link rel="canonical" href="http://www.wurao.xin/index.html">
 <!-- noscript 标签是为了在不支持 script 的环境下快速的展现 MIP 页面，推荐使用 -->
 <noscript>
 	<style mip-officialrelease>
                body {
                    -webkit-animation: none;
                       -moz-animation: none;
                        -ms-animation: none;
                            animation: none;
                }
  	</style>
 </noscript>
 <!-- 表格自定义填充铺满 -->
<style type="text/css">
.layui-table-view .layui-table {width:100%}
</style>

</head>
<body>
<!-- <div class="layui-container"> -->
	<div class="layui-row">
    <div class="layui-col-md12">
    	<ul class="layui-nav" lay-filter="">
		  <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/pay/pay.html">在线支付</a></li>
		  <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/pay/toOrderListPage.html">订单列表</a></li>
		</ul>
    </div>
  </div>
	
	<div class="layui-row">
	    <div class="layui-col-md12">
	        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			  <legend>订单列表</legend>
			</fieldset>
	    </div> 
	</div>
	
	<div class="layui-container">  
		<div class="layui-row">
		    <div class="layui-col-md12">
		        
				<table class="layui-hide" lay-data="{url:'/pay/orderList.do', id:'user'}" id="orderListTable" lay-filter="user"></table> 
		    </div> 
		</div>
	</div>
<!-- </div> -->


<script>
layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
			'upload', 'element' ], function() {
		var laydate = layui.laydate //日期
		, laypage = layui.laypage //分页
		layer = layui.layer //弹层
		, table = layui.table //表格
		, carousel = layui.carousel //轮播
		, upload = layui.upload //上传
		, element = layui.element; //元素操作
		
		
  var table = layui.table;
  
  //方法级渲染
  table.render({
	  elem: '#orderListTable'
	    ,url:'/pay/orderList.do'
	    ,limits: [10,20,30,60,90,150,300]  
	   	,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
	   	      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
	   	      //,curr: 5 //设定初始在第 5 页
	   	      ,groups: 3 //只显示 1 个连续页码
	   	      ,first: false //不显示首页
	   	      ,last: false //不显示尾页
	   	      
	   	 }
	    ,cols: [[
		  {field:'id', title: 'ID', width:80, sort: true}
	      ,{field:'name', width:100, title: '昵称', edit: 'text'}
	      ,{field:'qq', width:120, title: 'QQ'}
	      ,{field:'createDate', width:180, title: '支付时间', align:'center'}
	      ,{field:'way', width:100, title: '支付方式',align:'center'}
	      ,{field:'status', width:100, title: '支付状态',align:'center'}
	      ,{field:'remark',width:200, title: '订单详情'}
	    ]]
	    ,done: function(res, page, count){  
            //如果是异步请求数据方式，res即为你接口返回的信息。  
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度  
              
            //分类显示中文名称    
            $("[data-field='status']").children().each(function(){  
            		if($(this).text()=='支付状态'){  
                 	}else if($(this).text()=='1'){  
                       $(this).text("支付");  
                    }else{  
                       $(this).text("未支付"); 
                    }  
            })
            
            $("[data-field='createDate']").children().each(function(){  
            	if($(this).text()=='支付时间'){  
             	}else{  
             		var timestamp = $(this).text();
             		var d = new Date(timestamp * 1);    //根据时间戳生成的时间对象
             		var date = (d.getFullYear()) + "-" + 
             		           (d.getMonth() + 1) + "-" +
             		           (d.getDate()) + " " + 
             		           (d.getHours()) + ":" + 
             		           (d.getMinutes()) + ":" + 
             		           (d.getSeconds());
             		$(this).text(date);
                }  
            })
         }
  });
  
  //监听单元格编辑
  table.on('edit(user)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });
  
});
</script>

</body>
</html>